
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>白城市-主要交通网</title>
    
	<!--导入外部样式-->
	<link rel="stylesheet" href="../../css/zdmap.css" />
	<!-- 引入地图引擎库 -->
	<script src="http://webclient.smaryun.com/static/libs/include-lib-local-upgrade.js"></script>
	<script src="http://webclient.smaryun.com/static/libs/include-openlayers-local.js"></script>
	
	<!--示例公共样式-->
	<link rel="stylesheet" href="http://webclient.smaryun.com/static/libs/css/style.css"/> 
	   
	<style>
		label {
			display: unset;
		}
	</style>
	
<body>
	<div id="mapCon" style="position: absolute;width: 100%; height:95%;">
	        <!--图层控制面板-->
	        <div id="layerControl" class="layerControl">
	            <div class="title"><label>图层列表</label></div>
	            <ul id="layerTree" class="layerTree"></ul>
	        </div>
	        <!--信息窗口-->
	        <div id="popup" class="ol-popup">
	          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
	          <div id="popup-content"></div>
	        </div>
	    </div>
	    <!--坐标与比例尺-->
	    <div class="coordinateAndScaleBar">
	        <!--地图比例尺-->
	        <div id="scaleBarDiv" class="map-scalebar">
	            <div id="scaleBar"></div>
	        </div>
	        <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
	        <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position"></div>
	    </div>
	
	    <script type="text/javascript">
	        //定义地图
	        var map
	
	        //region定义Map和View
	        map = new ol.Map({
	          target: 'mapCon',
	          view: new ol.View({
	            projection: 'EPSG:3857',
				center:[13741834,5682812],//根据底图显示而测出来的
				//projection: 'EPSG:4326',
				//center:[110,40],//根据底图显示而测出来的
	            minZoom: 5, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
	            maxZoom: 18, //例如：19，//可以放大的最大级别；若为undefined表示无限制
	            zoom: 7, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
	          })
	        });
	        //endregion
	
	       const tdk = '4c27d6e0e8a90715b23a989d42272fd8';//天地图数据服务Key
	       var myTdtImgLayer = new ol.layer.Tile({
	              name: '天地图卫星影像',
	              visible: true, //图层不可见
	              title: "天地图卫星影像",
	              source: new ol.source.XYZ({
	                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
	                wrapX: false,
	              })
	       });
	       map.addLayer(myTdtImgLayer)
	
			var myTdtCvaLayer = new ol.layer.Tile({
				name: '天地图注记',
				visible: true, //图层不可见
				title: "天地图注记",
				source: new ol.source.XYZ({
					url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdk,
					wrapX: false,
				})
			});
			map.addLayer(myTdtCvaLayer)
	
			var myVecLayer1 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGISLocalPlus/XH/sfcls/交通网-3857"], {  //例如：'gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系'
	            ip: "gis25.jlu3s.com",
	            port: "6163",
	            //projection: "EPSG:3857",//默认是4326的
				//extent:[12519093.346639,4106308.035758,12528707.540105,4120314.316144], //LR旅游景点 //extent这个很关键,否则出不来
				extent:[121.927,44.475,124.00,46.00], //extent这个很关键,否则出不来
				//extent:[13572851,5539246,13803616,5780349], //extent这个很关键,否则出不来
	            title: "专题图层", //官方Zondy.Map.GdbpLayer里是没有这个属性的
	            visible: true, //官方Zondy.Map.GdbpLayer里是没有这个属性的
	            style: new Zondy.Object.CDisplayStyle({
	                AnnSizeFixed:true,//注记符号大小固定
	                PntSizeFixed:true,//点状符号大小固定
	                ShowCoordPnt:true,//显示坐标点
	                //ShowElemRect:true,//显示元素的外包矩形
	            })
	          });
			map.addLayer(myVecLayer1)
	
			/*------属性查询---start---*/
			//创建查询结构对象
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
			//是否包含几何图形信息
			queryStruct.IncludeGeometry = true;
			//是否包含属性信息
			queryStruct.IncludeAttribute = true;
			//是否包含图形显示参数
			queryStruct.IncludeWebGraphic = false;
	
			//指定查询规则
			var rule = new Zondy.Service.QueryFeatureRule({
				//是否将要素的可见性计算在内
				EnableDisplayCondition: false,
				//是否完全包含
				MustInside: false,
				//是否仅比较要素的外包矩形
				CompareRectOnly: false,
				//是否相交
				Intersect: true
			});
			//实例化查询参数对象
			var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGISLocalPlus/XH/sfcls/交通网-3857", {  //gdbp://MapGISLocalPlus/XH/sfcls/p1
				//几何对象
				//geometry: geomObj,
				//结果格式
				resultFormat: "json",
				//查询结构
				struct: queryStruct,
				where:"mpLayer=0", //条件查询的SQL语句,如果为空，则表示为单一的几何查询；如果取值，表示为几何和条件混合查询
				//查询规则
				//rule: rule,   //几何查询的规则
			});
			//设置查询分页号
			queryParam.pageIndex = 0;
			//设置查询要素数目
			queryParam.recordNumber = 20;
			//实例化地图文档查询服务对象
			var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
				//IP地址
				ip: "gis25.jlu3s.com",
				//端口号
				port: "6163"
			});
			//执行查询操作，querySuccess为成功回调，queryError为失败回调
			queryService.query(function (res) {
				console.log(res);
	
				var result = res;
				//初始化Zondy.Format.PolygonJSON类
				var format = new Zondy.Format.PolygonJSON();
				//将MapGIS要素JSON反序列化为ol.Feature类型数组
				var features = format.read(result);
	
				//实例化一个矢量图层drawLayerr用于高亮显示结果
				var drawSource = new ol.source.Vector({
					wrapX: false
				});
				drawSource.addFeatures(features);
				
				var style4Point = new ol.style.Style({
						//填充色
						// fill: new ol.style.Fill({
						// 	color: 'rgba(255, 0, 0, 0.5)'
						// }),
						//边线样式
						// stroke: new ol.style.Stroke({
						// 	color: 'rgba(255,204, 51, 1)',
						// 	width: 1
						// }),
						image: new ol.style.Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
							anchor: [0.55, 0.95], //基本准了
							src: './3.png'  //此处得用base64格式的图片源才能显示出来
						})
					});//end_of_ol.style.Style_style4Point
					
				var style4LineString = new ol.style.Style({
						//填充色
						// fill: new ol.style.Fill({
						// 	color: 'rgba(255, 0, 0, 0.5)'
						// }),
						//边线样式
						stroke: new ol.style.Stroke({
							color: 'rgba(255,100, 51, 1)',
							width: 3
						}),
						// image: new ol.style.Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
						// 	anchor: [0.55, 0.95], //基本准了
						// 	src: './3.png'  //此处得用base64格式的图片源才能显示出来
						// })
					});//end_of_ol.style.Style_style4LineString	
					
				var style4Polygon = new ol.style.Style({
						//填充色
						fill: new ol.style.Fill({
							color: 'rgba(255, 0, 0, 0.5)'
						}),
						//边线样式
						stroke: new ol.style.Stroke({
							color: 'rgba(255,204, 51, 1)',
							width: 1
						}),						
						// image: new ol.style.Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
						// 	anchor: [0.55, 0.95], //基本准了
						// 	src: './3.png'  //此处得用base64格式的图片源才能显示出来
						// })
					});//end_of_ol.style.Style_style4Polygon
				
				var drawLayer = new ol.layer.Vector({
					title:"属性查询结果",
					source: drawSource,
					style: style4LineString
				});
				map.addLayer(drawLayer);
	
				loadLayersControl(map, "layerTree"); //等这个图层加载完成后，再构建图层树
	
			}, function (error) {
				console.log(error);
			});
			/*------属性查询---end---*/
	
			/*------信息窗口---start---*/
	        map.on("click", mouseEventLinstener) //click,pointermove
	        function mouseEventLinstener(e) {
	            map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
	                console.log(feature,layer,345)
	                updateInfoView(feature);
	            });
	        }
			//（基于Zondy的popup)
			var container = null
			var content = null
			var closer = null
	
			 container = document.getElementById('popup')
			 content = document.getElementById('popup-content')
			 closer = document.getElementById('popup-closer')
	
			 var popup = null
			 /**
			 * 添加关闭按钮的单击事件（隐藏popup）
			 * @return {boolean} Don't follow the href.
			 */
			 closer.onclick = function() {
			 //未定义popup位置
			 popup.setPosition(undefined)
			 //失去焦点
				 closer.blur()
				 return false
			 }
	
			 if (popup == null) {
				 popup = new ol.Overlay(
					 /** @type {olx.OverlayOptions} */
					 ({
						 //要转换成overlay的HTML元素
						 element: container,
						 //当前窗口可见
						 autoPan: true,
						 //Popup放置的位置
						 positioning: 'bottom-center',
						 //是否应该停止事件传播到地图窗口
						 stopEvent: false,
						 autoPanAnimation: {
							 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
							 duration: 250,
						},
					 })
				 )
			 }
			map.addOverlay(popup); //一定要加到地图上，否则不显示；后续操作不要随意that.map.getOverlays().clear()移除overlay图层，否则将导致信息窗口显示不出来
	
			//移除信息窗口
			function removePopup() {
				popup.setPosition(undefined);
				closer.blur();
			}
			//图层信息框内容更新
			function updateInfoView(feature) {
				if (!feature && popup) {
					removePopup();
					return;
				}
				if(feature){
					/*基于Zondy的写法*/
					//清空popup的内容容器
					content.innerHTML = '';
					 //在popup中加载当前要素的具体信息
					 //addFeatrueInfo(featuerInfo)
					 //content.appendChild(elementImg)
					 let html = getHtml(feature)
					 //console.log(html,19)
					 content.innerHTML = html;
					 //content = getHtml(feature);
					 //popup.setPosition(feature.getGeometry().getCoordinates())
					 popup.setPosition(getCenterPointFromExtent(feature.getGeometry().getExtent()))
	
	                function getCenterPointFromExtent(extentArr){
	                    let x = (extentArr[0] + extentArr[2])/2;
	                    let y = (extentArr[1] + extentArr[3])/2;
	                    return [x,y];
	                }
				}
			} //end of updateInfoView()
	
			function getHtml(features) {
				//创建属性框
				let html = '';
				html += `<div class="iftp">`;
				html += `<table>`;
				html += `<tr><th style="min-width: 100px;">属性名称</th><th style="min-width: 200px;">属性值</th></tr>`;
	
				let f = features.values_;//与常规的相比，Zondy返回的feature多包了一层value_【相当于value_.value_后才能拿到字段的值】，所以此处多访问一层
				//console.log(f,20)
	
				//遍历各属性字段信息并放置到表格中
				for (const key in f.values_) {
					if (f.values_.hasOwnProperty(key)
						&& key != 'geometry'
						&& key != 'SmID'
						&& key != 'SmUserID'
						&& key != 'the_geom'
						&& key != 'PopupInfo'
						&& key != 'imgSrc'
						&& key != 'UserID'  //Zondy
						&& key != 'mpLayer'
						&& key != '照片地址' //排除照片地址的干扰
					) {
						const element = f.values_[key];
						if (element) {
							html += `<tr><td>${key}</td><td>${element}</td></tr>`;
						}
					}
				}
	
				//检测是否含有图片，若有则输出为html格式内容以便后续插入信息窗口中
				let picsDiv;
				//根据属性字段的值来获取相关图片地址
				let imgSrcStr = f.values_["照片地址"];
				if(imgSrcStr){
					console.log("→使用此方法：属性直接读取图片地址!!")
					let imgSrcArr = imgSrcStr.split('**');
					//console.log(imgSrcArr,12)
					picsDiv = buildPicDivForFeature(imgSrcArr);
				}
				//如果有图片则把图片罗列出来
				if(picsDiv){
					html += picsDiv;
				}
				html += `</table>`;
				html += `</div>`;
				return html;
			} //end of getHtml()
	
			//（方法）根据某要素图形所含的图片地址数组构建图片Div
			function buildPicDivForFeature(imgSrcArr){
				let picsDiv = "";
				imgSrcArr.forEach(item => {
					if(item){
						picsDiv += "<a href='" + item + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + item + "' width='120px;' height='90px;'></a>";
					}
				});
				picsDiv = "<tr>" +
					"<td  colspan='2'>" + picsDiv + "</td>" +
					"</tr>";
				return picsDiv;
			}
			/*------信息窗口---end---*/
	
			/*------图层面板---start---*/
			//加载图层列表数据
			//loadLayersControl(map, "layerTree");
	
			//map中的图层数组
			var layerArr = new Array();
			//图层名称数组
			var layerNameArr = new Array();
			//图层可见属性数组
			var layerVisibilityArr = new Array();
	
			/**
			 * 加载图层列表数据
			 * @param {ol.Map} map 地图对象
			 * @param {string} id 图层列表容器ID
			 */
			function loadLayersControl(map, id) {
				//图层目录容器
				var treeContent = document.getElementById(id);
				//获取地图中所有图层
				var layers = map.getLayers();
				for (var i = 0; i < layers.getLength() ; i++) {
					let t = layers.array_[i].get('title');
					let tv = layers.array_[i].getVisible();
	
					//新增li元素，用来承载图层项
					var elementLi = document.createElement('li');
					// 添加子节点
					treeContent.appendChild(elementLi);
					//创建复选框元素
					var elementInput = document.createElement('input');
					elementInput.type = "checkbox";
					elementInput.name = "layers";
					elementLi.appendChild(elementInput);
					//创建label元素
					var elementLable = document.createElement('label');
					elementLable.className = "layer";
					//设置图层名称
					setInnerText(elementLable, t);
					elementLi.appendChild(elementLable);
					//设置图层默认显示状态
					if (tv) {
						elementInput.checked = true;
					}
					//为checkbox添加变更事件
					addChangeEvent(elementInput, layers.array_[i]);
				}
			}
			/**
			 * 为checkbox元素绑定变更事件
			 * @param {input} element checkbox元素
			 * @param {ol.layer.Layer} layer 图层对象
			 */
			function addChangeEvent(element, layer) {
				element.onclick = function () {
					if (element.checked) {
						//显示图层
						layer.setVisible(true);
					}
					else {
						//不显示图层
						layer.setVisible(false);
					}
				};
			}
			/**
			 * 动态设置元素文本内容（兼容）
			 */
			function setInnerText(element, text) {
				if (typeof element.textContent == "string") {
					element.textContent = text;
				} else {
					element.innerText = text;
				}
			}
			/*------图层面板---end---*/
	
			/*------图层控件---start---*/
	        /*集中调用*/
	        addZoomControl();
	        addZoomExtentControl();
	        addMousePositionControl();
	        addScaleControl();
	        addEagleViewControl();
	
	        //缩放控件
	        function addZoomControl() {
	            if (map != null) {
	                var zoom = new ol.control.Zoom()
	                map.addControl(zoom)
	            }
	        }
	        //复位
	        function addZoomExtentControl() {
	            if (map != null) {
	                var zoomToExtent = new ol.control.ZoomToExtent({
	                    extent: [13572851,5539246,13803616,5780349],
	                })
	                map.addControl(zoomToExtent)
	            }
	        }
	        //添加坐标
	        function addMousePositionControl() {
	            if (map != null) {
	                var mousePositionControl = new ol.control.MousePosition({
	                    //坐标格式
	                    coordinateFormat: ol.coordinate.createStringXY(5),//坐标小数位数
	                    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
	                    projection: 'EPSG:4326',
	                    //坐标信息显示样式类名，默认是'ol-mouse-position'
	                    className: 'custom-mouse-position',
	                    //显示鼠标位置信息的目标容器
	                    target: document.getElementById('mouse-position'),
	                    //未定义坐标的标记
	                    undefinedHTML: '&nbsp;',
	                })
	                map.addControl(mousePositionControl)
	            }
	        }
	        //比例尺控件
	        function addScaleControl() {
	            if (map != null) {
	                //实例化比例尺控件（ScaleLine）
	                var scaleLineControl = new ol.control.ScaleLine({
	                    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
	                    units: 'metric',
	                    target: 'scaleBar',
	                    className: 'ol-scale-line'
	                })
	                map.addControl(scaleLineControl)
	            }
	        }
	        //鹰眼快视
	        function addEagleViewControl() {
	                const tdk = '4c27d6e0e8a90715b23a989d42272fd8';//天地图数据服务Key
	                let TiandiMap_img,TiandiMap_imgcia;
	                if (map != null) {
	                    TiandiMap_img = new ol.layer.Tile({
	                        name: '天地图影像图层',
	                        visible: true, //图层不可见
	                        source: new ol.source.XYZ({
	                            url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
	                            wrapX: false,
	                        }),
	                    })
	                    TiandiMap_imgcia = new ol.layer.Tile({
	                        name: '天地图影像注记图层',
	                        visible: true, //图层不可见
	                        source: new ol.source.XYZ({
	                            url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tdk,
	                            wrapX: false,
	                        }),
	                    })
	                    //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
	                    var overviewMapControl = new ol.control.OverviewMap({
	                        //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
	                        className: 'ol-overviewmap ol-custom-overviewmap',
	                        //鹰眼中加载同坐标系下不同数据源的图层
	                        layers: [TiandiMap_img, TiandiMap_imgcia],
	                        //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
	                        collapseLabel: '\u00BB',
	                        //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
	                        label: '\u00AB',
	                        //初始为展开显示方式
	                        collapsed: true, //true为默认折叠
	                        view: new ol.View({ //20210929此处自定义增加了view的设置
	                            projection: 'EPSG:3857',
	                            multiWorld: true
	                        }),
	                    })
	                    map.addControl(overviewMapControl)
	                }
	            }
	        /*------图层控件---end---*/
	
	    </script>
	

<div id="mapDiv" style="background-image: url(../../images/h.jpg);background-repeat: no-repeat;background-size: cover;background-color: skyblue;"></div>
</body>
</html>